<template>
  <div class="detail">
    <div v-for="item in hotelInfo">
      <router-link class="detail-data" to="/detailInfo">
        <div class="detail-data-img">
          <img src="../assets/bgLoading.png" v-lazyload="item.imgUrl" /> <!-- v-bind:src="item.imgUrl" -->
        </div>
        <div class="detail-info">
          <div class="detail-data-name">{{item.name}}</div>
          <div>
            <span class="detail-info-score">{{item.score}}分</span>
            <span class="detail-data-font">{{item.commentNum}}条评论</span>
          </div>
          <div class="detail-data-font">{{item.address}}</div>
          <div class="detail-data-price">¥{{item.price}}元</div>
        </div>
      </router-link>

    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import bottom  from '../components/bottom.vue';
  export default {
    name: '景点',
    components:{
      'bottom' :　bottom
    },
    methods:{

    },
    data () {
      return {
        hotelInfo:[
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1507/57/22410c5a188d64defc955b4633b34ee9.water.jpg_110x110_cfe2dcb8.jpg',name:'世界之窗',price:'128',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1512/b1/b1214710695f64d490.img.jpg_110x110_0006e4af.jpg',name:'海底世界',price:'138',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/201403/07/dcd57a5c339efc637652d2a507e31347.jpg_110x110_d79c65ec.jpg',name:'欢乐谷',price:'148',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1412/4e/3b9b94cf390225fd5e47a54073fe6115.water.jpg_110x110_ea87dd31.jpg',name:'涠洲岛',price:'158',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1411/57/2dabcbccd5845573321fe636c8c39256.water.jpg_110x110_6fb2a2c8.jpg',name:'环岛游',price:'168',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1409/16/0974de1e15b7296d04a25bcce68b9dc4.jpg_110x110_fc769c59.jpg',name:'野人谷',price:'178',address:'288人消费',score:'4.8',commentNum:'150'},
          {imgUrl:'http://img1.qunarzz.com/sight/p0/1409/05/9e5c1ad8a25c3525215cd71dcf55dea2.jpg_110x110_4f28d167.jpg',name:'银滩',price:'188',address:'288人消费',score:'4.8',commentNum:'150'},
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../commomCss/comomCss";
  .detail{
    .detail-data{
      display: flex;
      margin: torem(10px);
      .detail-data-img{
        background-image: url('../assets/bgLoading.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        img{
          width: torem(150px);
          height: torem(150px);
        }
      }
    }
    .detail-info{
      font-size: torem(18px);
      padding-left: torem(10px);
      flex: 1;
      .detail-data-name{
        font-size: torem(20px);
        color: #333;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 90%;
      }
      div{
        text-align: left;
        padding: torem(5px) 0;
        .detail-info-score{
          color: red;
        }
      }
      .detail-data-price{
        color: #06c1ae;
      }
      .detail-data-font{
        color: #8c8c8c
      }
    }
  }

</style>
